<template>
  <div class="produce_detail">
    <img class="img_styl" src="@/assets/images/product.png" alt="" srcset="" />
    <div class="product_content">
      <Spin fix v-if="MX_tableLoading"></Spin>
      <div class="swiper_styl">
        <Carousel loop style="width: 100%">
          <CarouselItem v-for="(item, index) of productInfo.img" :key="index">
            <img class="img_styl1" :src="imagePreviewUrl + item" alt="" srcset="" />
          </CarouselItem>
        </Carousel>
      </div>
      <div class="product_right">
        <div class="product_name">{{ productInfo.name }}</div>
        <div class="product_item">
          <span class="title_styl">产品编号:</span>
          <span class="item_num">{{ productInfo.id }}</span>
        </div>
        <div class="product_item price_styl">
          <span class="title_styl">产品价格:</span>
          <span class="ptice_num">{{ productData.price + "元" ? productData.price + "元" : "暂无报价" }}</span>
        </div>
        <div class="product_item">
          <span class="title_styl">销售公司:</span>
          <div class="attr_styl">
            <div
              class="attr_name"
              :class="[chooseCompanydata.companyId == item.companyId ? 'attr_nameCopy' : '']"
              @click="chooseCompanyFun(item)"
              v-for="(item, index) in companyNameList"
              :key="index"
            >
              {{ item.companyName }}
            </div>
          </div>
        </div>
        <div class="product_item">
          <div class="title_styl">规格名称:</div>
          <div class="attr_styl">
            <div
              class="attr_name"
              :class="[productData.id == item.id ? 'attr_nameCopy' : '']"
              @click="chooseProductFun(item)"
              v-for="(item, index) in productAttrList"
              :key="index"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="product_item">
          <span class="title_styl">购买数量:</span>
          <span class="buy_styl">
            <!-- <div class="unit_styl">{{ productData.stock ? productData.stock : 0 }} 吨</div> -->
            <Input v-model="nnum" type="number" placeholder="请输入购买数量" style="width: 300px" :min="0"> <span slot="append">吨</span></Input>
          </span>
        </div>
        <!-- v-if="peodectKey == 1"  -->
        <!-- <div class="btn_styl" @click="toBuyFun()">立即购买</div> -->
        <!-- <div v-if="peodectKey == 2" class="no_buy">
          商品锁价中,暂不支持购买!
        </div>
        <div v-if="peodectKey == 3" class="no_buy">暂不支持购买此产品!</div>
        <div v-if="peodectKey == 4" class="no_buy">
          账户审核中,暂不支持购买!
        </div> -->
        <!-- v-if="peodectKey == 1"  -->
        <div class="btn_styl" v-if="productData.suspendState == 1" @click="toBuyFun()">立即购买</div>
        <div v-if="productData.suspendState == 0" class="no_buy">商品锁价中,暂不支持购买!</div>
        <!--<div v-if="peodectKey == 3" class="no_buy">暂不支持购买此产品!</div> -->
        <div v-if="store_userInfo.examineStatus != 0" class="no_buy">账户审核中,暂不支持购买!</div>
      </div>
    </div>
    <div class="goods_detail">
      <div class="goods_title">
        <div class="title_name">商品介绍</div>
      </div>
      <div class="detail_styl">
        <div class="detail_content" v-html="productInfo.notes"></div>
      </div>
    </div>

    <!-- 创建提货单 -->
    <BillOrderCreate ref="BillOrderCreate"></BillOrderCreate>
    <!-- 创建货单 -->
    <PurchasedProduct ref="PurchasedProduct"></PurchasedProduct>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import BillOrderCreate from "@/views/personalCenter/BillOrder-Create.vue";
import localData from "../../../localData";
import PurchasedProduct from "./purchasedProduct";

export default {
  components: {
    BillOrderCreate,
    PurchasedProduct
  },
  data() {
    return {
      nowDate: this.$Date().format("YYYY-MM-DD"),
      companyNameList: [],
      productAttrList: [],
      nnum: 0,
      productData: {},
      chooseCompanydata: {},
      imagePreviewUrl: localData.API_URl + "/guns", // 图片预览地址
      MX_tableLoading: false,
      peodectKey: "1",
      productInfo: {},
      specList: [],
      chooseIndex: -1
    };
  },
  computed: {
    ...mapGetters(["store_userInfo"])
  },
  watch: {
    $route() {
      this.getProductInfo();
    }
  },
  mounted() {
    this.getProductInfo();
  },
  methods: {
    toBuyFun() {
      if (this.nnum == 0 || !this.nnum) {
        this.$Message.error("请输入购买数量!");
        return;
      }
      console.log(this.$store.getters.store_userInfo);
      // 组装订单数据
      let data = {
        type: "0",
        name: this.nowDate + " - " + this.productData.name + " - " + this.nnum,
        companyName: this.chooseCompanydata.companyName,
        companyId: this.chooseCompanydata.companyId,
        companyCode: this.chooseCompanydata.companyCode,
        factoryAreaId: this.productData.factoryId,
        factoryAreaName: this.productData.factoryName,
        personName: this.$store.getters.store_userInfo.salesmanName,
        personId: this.$store.getters.store_userInfo.salesmanId,
        customerName: this.$store.getters.store_userInfo.realName,
        customerCode: this.$store.getters.store_userInfo.code,
        customerId: this.$store.getters.store_userInfo.id,
        busType: "0",
        productAttrName: this.productData.name,
        productAttrId: this.productData.id,
        nprice: this.productData.price,
        nnum: this.nnum,
        nmoney: this.productData.price * this.nnum
      };
      console.log(data);
      // return;
      this.$refs.PurchasedProduct.openFun(data);
    },

    // 获取商品信息
    getProductInfo() {
      this.MX_tableLoading = true;
      this.httpGet(this.API.API_productDetailandG, {
        productId: this.$route.query.id
      })
        .then((res) => {
          this.productInfo = res.data.docProduct;
          this.companyNameList = res.data.company || [];
          // 默认选中第一个公司
          this.chooseCompanydata = {
            ...this.companyNameList[0]
          };
          this.getProductAttrList({
            productId: this.$route.query.id,
            companyId: this.chooseCompanydata.companyId
          });
          this.MX_tableLoading = false;
        })
        .catch((err) => {
          this.MX_tableLoading = false;
          console.error(err);
        });
    },
    // 根据产品 公司查询规格
    getProductAttrList(data) {
      this.httpGet(this.API.API_productDetailandG, data)
        .then((res) => {
          this.productAttrList = res.data.list;
          this.productData = {
            ...this.productAttrList[0]
          };
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 选中公司
    chooseCompanyFun(item) {
      this.chooseCompanydata = item;
      this.getProductAttrList({
        productId: this.$route.query.id,
        companyId: item.companyId
      });
    },
    // 选中规格
    chooseProductFun(item) {
      this.productData = item;
      // this.changeProductKey();
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

.produce_detail {
  width: 100%;
  min-height: 500px;
  background-color: #f3f3f3;

  .img_styl {
    width: 100%;
    height: 110px;
  }

  .product_content {
    position: relative;
    .flex-x(flex-start);
    width: 1185px;
    padding: 26px 0 40px 20px;
    margin: 10px auto 0 auto;
    background-color: #ffffff;

    .swiper_styl {
      width: 324px;
      height: 400px;

      margin-right: 40px;

      .img_styl1 {
        width: 324px;
        height: 400px;
      }
    }

    .product_right {
      flex-grow: 1;
      height: 400px;
      .flex-y(space-between, flex-start);

      .product_name {
        text-align: left;
        font-size: 26px;
        font-weight: bold;
        color: @themeColor;
      }

      .product_item {
        .flex-x(flex-start);
        flex-wrap: wrap;
        font-size: 16px;

        .buy_styl {
          .flex-x();

          .unit_styl {
            margin-left: 10px;
            color: #9e9e9e;
          }
        }

        .title_styl {
          margin-right: 10px;
          font-size: 18px;
        }

        .item_num {
          color: #9e9e9e;
        }

        .attr_styl {
          .flex-x(flex-start);
          flex-wrap: wrap;

          .attr_name {
            padding: 4px 14px;
            margin: 0 10px 10px 0;
            color: #b1b4b8;
            border: 1px solid #b1b4b8;
            cursor: pointer;
          }

          .attr_nameCopy {
            color: @themeColor;
            border: 1.5px solid @themeColor;
            background: #edf4ff;
          }
        }
      }

      .price_styl {
        width: 100%;
        padding: 8px 8px;
        background-color: #f5f6f7;

        .ptice_num {
          color: #c63431;
        }
      }

      .btn_styl {
        .solid-btn(256px, 46px, 4px, @themeColor, #ffffff);
      }

      .no_buy {
        .hollow-btn(256px, 46px, 4px, #ffffff, red, red);
      }
    }
  }

  .goods_detail {
    width: 1185px;
    margin: 0 auto;
    background-color: #ffffff;

    .goods_title {
      margin: 0 16px;
      background-color: #f5f6f7;

      .title_name {
        width: 120px;
        height: 40px;
        line-height: 44px;
        color: #ffffff;
        background-color: @themeColor;
      }
    }

    .detail_styl {
      min-height: 500px;

      .detail_content {
        padding: 30px 16px;
        text-align: left;
      }
    }
  }
}
</style>
